<template>
  <div class="body1" style="padding-top:10px;">
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="4" v-for="(item,index) in countArr" :key="index">
        <div class="grid-content bg-purple-dark">
          <div>{{item.cate_name}}</div>
          <div>{{item.money}}</div>
        </div>
      </el-col>
    </el-row>
    <div class="form_select">
      <div>
          <el-button type="primary"  size="small" @click="selectShow = !selectShow">
          &nbsp;&nbsp;搜&nbsp;&nbsp;索&nbsp;&nbsp;
          </el-button>
      </div>
      <div class="select_right">
          <el-button type="primary"  size="small" @click="exportExcel">导出Excel</el-button>
          <!--<el-button type="primary"  size="small">新增客户</el-button>-->
      </div>
    </div>
    <div class="form_select1" v-show="selectShow">
        <!--<div class="select_font">
           支出类目:<el-input class="select_input1" v-model="form.name" size="small" placeholder="供应商名称"></el-input>
        </div>-->
        <div class="select_font">
           开始时间: <el-date-picker
            @change="sdateChage"
            v-model="form.sdate"
            type="date"
            placeholder="开始时间" 
            size="small" 
            class="select_option1"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            >
          </el-date-picker>
        </div>
        <div class="select_font">
           结束时间: <el-date-picker
            @change="edateChage"
            v-model="form.edate"
            type="date"
            placeholder="结束时间" 
            size="small" 
            class="select_option1"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            >
          </el-date-picker>
        </div>
        <div class="select_font">
          制&nbsp;&nbsp;单&nbsp;&nbsp;人:<el-select class="select_option1" size="small" v-model="form.user_id" placeholder="请选择">
         <el-option
              v-for="(item,index) in userArr"
              :key="index"
              :label="item.username"
              :value="item.id">
            </el-option>
          </el-select>
        </div>

        <el-button type="primary"  size="small" style="margin-top:20px;" @click="search">
        &nbsp;&nbsp;搜&nbsp;&nbsp;索&nbsp;&nbsp;</el-button>
    </div>
    <costTable :list="list" @func="editTrue"></costTable>
  </div>
</template>

<script>
import costTable from "./costTable"
import {excelExport} from "../../public/excelExport"
  export default {
    data() {
      return {
        selectShow:false,
        list:[],
        countArr:{},
        form:{},
        payArr:[
          {id:0,name:'全部'},
          {id:1,name:'未付款'},
          {id:2,name:'已付款'}
        ],
        takeArr:[
          {id:0,name:'全部'},
          {id:1,name:'未收货'},
          {id:2,name:'已收货'}
        ],
        userArr:[
          {id:0,username:'全部'}
        ]
      };
    },
    components: {
      "costTable": costTable
    },
    created: function() {
      this.getList()
      this.getCount()
      this.getUser()
    },
    methods: {
      getList:function(){
        this.form.store_id = localStorage.getItem('store_id')
        var that = this
        this.$get('form/cost',this.form).then((res) => {
          that.list = res.data
        })
      },
      getCount:function(){
      var data = {
          store_id:localStorage.getItem('store_id')
        }
        var that = this
        this.$get('form/costMoneySum',data).then((res) => {
          that.countArr = res.data
        })
      },
      sdateChage:function(e){
        this.form.sdate = e
      },
      edateChage:function(e){
        this.form.edate = e
      },
      getUser:function(){
        var data = {
          store_id:localStorage.getItem('store_id')
        }
        var that = this
        this.$get('staff/all',data).then((res) => {
          that.user = res.data
          var userArr = that.userArr
          that.userArr = userArr.concat(res.data)
        })
      },
      search:function(){
        if(this.form.sdate && !this.form.edate){
          this.$message.error('请选择开始时间和结束时间!');
          return;
        }
        if(!this.form.sdate && this.form.edate){
          this.$message.error('请选择开始时间和结束时间!');
          return;
        }
        if(this.form.sdate > this.form.edate){
          this.$message.error('开始时间不能大于结束时间!');
          return;
        }
        this.getList()
      },
      exportExcel:function() {
        let title = '销售报表'
        excelExport(title)
        return false;
      },
      editTrue:function(){
        
      }
  }
};
</script>
<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    height: 80px;
    text-align:center;
    display: flex;
    flex-direction:column;
    justify-content:center;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
  }
</style>